<template>
  <div v-if="show">
    <el-form>
      <el-input v-if="identifierShow" v-model="identifier">
        <template slot="prepend">标识符</template>
      </el-input>
      <el-form-item label="数据类型" prop="dataType">
        <el-select
          v-model="dataType"
          clearable
          placeholder="请选择"
          @change="onDataTypeChange"
        >
          <el-option
            v-for="item in dataTypeList"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          />
        </el-select>
        <component :is="myComponent" ref="treeData" :data-type="dataType" />
      </el-form-item>
    </el-form>
    <!--        <el-button @click.native="submit">提交</el-button>-->
  </div>
</template>

<script>
import numberTree from './NumberTree'
import textTree from './TextTree'
import boolTree from './BoolTree'
import structTree from './StructTree'
import dateTree from './DateTree'
import { productDataTypeApi } from '../../../api/product'

export default {
  name: 'ByteTree',
  components: {
    numberTree,
    textTree,
    boolTree,
    structTree,
    dateTree
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    funcType: {
      type: String,
      default: 'notservicce'
    }
  },
  data() {
    return {
      myComponent: null,
      unit: '',
      unitList: [],
      identifier: '',

      dataTypeList: [],
      dataType: '',
      identifierShow: true
    }
  },
  watch: {
    funcType: {
      handler(newValue, oldValue) {
        console.log('newValue:' + newValue + '  old:' + oldValue)
        if (newValue === 'SERVICE') {
          this.identifierShow = false
        } else {
          this.identifierShow = true
        }
      },
      // 代表在wacth里声明了funcType这个方法之后立即先去执行handler方法
      immediate: true
    }
  } /** ends watch*/,
  created() {
    this.initDataTypeList()
  },
  methods: {
    submit() {
      const ret = this.$refs.treeData.getData()
      ret.identifier = this.identifier
      return ret
    },
    getData() {
      if (undefined == this.$refs.treeData) {
        return null
      }

      const ret = this.$refs.treeData.getData()
      ret.identifier = this.identifier
      return ret
    },
    reset() {
      this.myComponent = null
      this.dataType = ''
      this.identifier = ''
    },
    onDataTypeChange(dataType) {
      if (this.numArr.includes(dataType)) {
        this.myComponent = numberTree
      } else if (this.dateArr.includes(dataType)) {
        this.myComponent = dateTree
      } else if (this.boolArr.includes(dataType)) {
        this.myComponent = boolTree
      } else if (this.textArr.includes(dataType)) {
        this.myComponent = textTree
      } else if (this.structArr.includes(dataType)) {
        this.myComponent = structTree
      }
    } /** onDataTypeChange*/,

    initDataTypeList() {
      productDataTypeApi().then((data) => {
        const retValue = data.data
        this.dataTypeList = retValue
      })
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 260px;
}
</style>
